<template>
  <div class="app-container flex column">
    <div class="flex align-center" style="position: relative">
      <top-title :policeView="true" :cusString="cusString"></top-title>
      <div class="goback" @click="goback">返回</div>
    </div>
    <div class="content-wrap f1 flex column">
      <!-- 搜索栏 -->
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">场所名称:</div>
          <div class="input-item">
            <a-input :maxLength="30" clearable v-model="queryParam.companyName" placeholder="请输入场所名称" />
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">检查/复查:</div>
          <div class="input-item">
            <a-select
              ref="select"
              allowClear
              @change="handleChange"
              v-model="queryParam.checkType"
              placeholder="请选择检查状态"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">检查</a-select-option>
              <a-select-option value="2">复查</a-select-option>
            </a-select>
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">提交时间:</div>
          <div class="input-item">
            <a-month-picker
              v-model="queryParam.value"
              :allowClear="false"
              :disabled-date="disabledDate"
              @change="timeChange"
              value-format="YYYY-MM"
            />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
        </div>

        <div class="btn-group">
          <a-button
            class="exportBtn"
            @click="
              handleExportXls(`${cusString}`, {
                bizId: queryParam.bizId,
                startTime: queryParam.startTime,
                endTime: queryParam.endTime,
                policeUserId: queryParam.policeUserId,
              })
            "
            type="primary"
          >
            导出Excel
          </a-button>
        </div>
      </div>

      <div class="table-wrap f1">
        <a-table
          bordered
          id="a-table"
          class="tableList"
          :scroll="{ x: 999 }"
          rowKey="policeUserNo"
          :columns="cusColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
        >
          <template #checkType="records">
            <span v-if="records.checkType == 1">检查</span>
            <span v-else>复查</span>
          </template>
          <template #checkResult="records">
            <span v-if="records.checkResult == 0">未检查</span>
            <span v-else-if="records.checkResult == 1">合格</span>
            <span v-else>不合格</span>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
export default {
  name: 'policeInspector',
  components: { topTitle, startEndTime },
  mixins: [JeecgListMixin],
  data() {
    return {
      cusString: '',
      url: {
        list: '/police/staion/unqualifiedUnqualified/page',
        exportXlsUrl: '/police/staion/unqualifiedUnqualified/page/export',
      },
      disableMixinCreated: true,
      customKey: '',
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '场所名称',
          ellipsis: true,
          align: 'center',
          dataIndex: 'companyName',
        },
        {
          title: '检查时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'checkTime',
        },
        {
          title: '检查/复查',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'checkType' },
        },
        {
          title: '检查结果',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'checkResult' },
        },
      ],
      curMonth: '',
      cusColumns: [],
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.constructor === Object) {
      let params = this.$route.query
      this.queryParam = { ...params }
    }

    // this.queryParam.value = this.$moment().format('YYYY-MM')
    this.timeChange()
    this.loadData()
  },
  methods: {
    disabledDate(current) {
      return current && current > this.$moment().endOf('day')
    },

    timeChange(v, index) {
      this.$forceUpdate()
      this.queryParam.startTime = this.$moment(this.queryParam.value).startOf('month').valueOf()
      this.queryParam.endTime = this.$moment(this.queryParam.value).endOf('month').valueOf()
    },

    searchReset() {
      this.queryParam = {}
      let params = this.$route.query
      this.queryParam = { ...params }
      this.queryParam.value = this.$moment().format('YYYY-MM')
      this.timeChange()
      this.loadData()
    },

    handleChange() {
      this.$forceUpdate()
    },

    async loadData() {
      this.dataSource = []
      this.queryParam.pageNo = this.ipagination.current
      this.queryParam.pageSize = this.ipagination.pageSize
      let { result } = await getAction(this.url.list, this.queryParam)
      if (Object.keys(result).length !== 0) {
        this.cusColumns = this.columns.concat(result.keyName)
        this.allChildrenAddValue(this.cusColumns) //递归塞值
        this.dataSource = result.page.records
        this.ipagination.total = result.page.total
      }

      this.curMonth = this.queryParam.value.split('-')[1]
      this.cusString = `${this.queryParam.policeAgencyName}(${this.queryParam.policeUserName})${this.queryParam.title}场所${this.curMonth}月检查情况统计表-${this.queryParam.type}`
    },

    allChildrenAddValue(node) {
      // 递归生成动态的目标columns
      for (const item of node) {
        if (item.title && item.title !== '序号') {
          item.width = 100
          item.align = 'center'
        }

        if (item.title && item.title !== '序号' && !item.children && !item.ellipsis) {
          item.scopedSlots = { customRender: 'cusRander' }
        }
        if (item.children) {
          this.allChildrenAddValue(item.children)
        }
      }
      return node
    },
    getNodeByName(list, index) {
      for (const item of list) {
        if (item.dataIndex === index) return item
        if (item.children) {
          const res = this.getNodeByName(item.children, index)
          if (res) return res
        }
      }
    },

    goback() {
      this.$router.go(-1)
    },

    exportExcel() {},
  },
  destroy() {},
}
</script>

<style scoped lang="less">
/deep/ .ant-table-body {
  border: 1px solid #0a5297 !important;
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    border: 1px solid #0a5297 !important;
  }
}

// /deep/ .ant-table-row-cell-break-word:hover {
//   background: #1388ff !important;
//   cursor: pointer;
// }

.goback {
  width: 60px;
  height: 30px;
  font-size: 16px;
  color: #0e2b48;
  background: #1388ff;
  border-radius: 4px;
  line-height: 30px;
  text-align: center;
  position: absolute;
  right: 0px;
  cursor: pointer;
}

.app-container {
  background: var(--theme-content-bg);
  padding-top: 0;
  padding-bottom: 0;
  .content-wrap {
    background: var(--theme-container-bg);
    overflow: hidden;
    .table-wrap {
      padding: 0 20px;
      overflow: auto;
    }
  }
}
</style>
